<template>
  <div class="islandInfo">
    <div class="discount">
        <div class="discount-title clearfix">
          <span
          @click="handleBack"
          class="mui-icon mui-icon-arrowleft"></span>
          <h2 class="">国内折扣</h2>
        </div>
    </div>
    <div class="container" v-for="(item ,index) in productInfo" :key="index">
      <h2>{{item.productName}}</h2>
      <div class="price">
        {{item.productPrice}}
      </div>
      <div class="tips">
        <span>{{item.productFrom}}</span>
        <span>{{item.productTime}}</span>
        <span>{{item.productTips}}</span>
      </div>
      <hr>
      <div class="content clearfix">
        <div class="imgWrap fr">
          <img :src="imgUrl(index)" alt="">
        </div>
        <p class="p1">{{item.productInfo}}</p>
      </div>
      <hr>
      <div class="imgContainer">
         <img :src="imgUrl(index)" alt="">
      </div>
      <div class="qianwanggoumai">
        前往购买
      </div>
      <div class="weixin2">
        <img src="../../images/mmbweixin2.png" alt="">
      </div>
      <div class="fabiaopinglun">
        <div class="title">
          发表评论
        </div>
        <div class="textArea">
          <textarea name="" id=""></textarea>
          <div class="clearfix">
            <button class="mui-btn mui-btn-warning">发表评论</button>
          </div>
        </div>
      </div>
    </div>
  <mm-footer></mm-footer>
  </div>
</template>
<script>
import mmFooter from "../publicComponents/mmFooter.vue";
export default {
  data() {
    return {
      productInfo: []
    }
  },
  created() {
    this.getProductInfo()
  },
  methods: {
    getProductInfo() {
      var id = this.$route.params.id
      this.$http.get('api/getdiscountproduct?'+id).then((res) => {
        this.productInfo = res.body.result
        // console.log(this.productInfo)
      })
    },
    imgUrl(i) {
      var href = ''
      this.productInfo.forEach((item ,index) => {
        if(i === index) {
          href = item.productImg.slice(item.productImg.indexOf('"')+1,item.productImg.indexOf(' alt')-1)
         return
        }
      })
      return href
    },
    handleBack() {
      this.$router.go(-1)
    }
  },
  components: {
    mmFooter
  }
}
</script>
<style lang="less" scoped>
  @import '../../less/var';
  .islandInfo {
    background-color: #fff;
    .discount-title {
    height: 98 / @base;
    padding: 10 / @base 15 / @base;
    background-color: #ff9e20;
    position: relative;
    h2 {
      font-size: 28 / @base;
      height: 100%;
      line-height: 70 / @base;
      margin: 0;
      text-align: center;
      margin: 0 auto;
    }
    span {
      font-size: 40 / @base;
      height: 100%;
      line-height: 70 / @base;
      position: absolute;
      left: 20/@base;
    }
  }
    .container {
      padding: 15/@base 20/@base;
      h2 {
        font-size: 36/@base;
        line-height: 1.4;
      }
      .price {
        font-size: 32/@base;
        color:red;
        text-indent: 10/@base;
        font-weight: 700;
        line-height: 1.3;
      }
      .tips {
        font-size: 22/@base;
        text-indent: 10/@base;
        margin-bottom: 20/@base;
        // line-height: 1.3;
        margin-top: 5/@base;
      }
      .content {
        margin-top: 30/@base;
        margin-bottom: 20/@base;
        line-height: 1.2;
        .imgWrap {
          width: 280/@base;
          img {
            width: 100%;
          }
        }
        p.p1 {
          // overflow: hidden;
          font-size: 28/@base;
        }
      }
      .imgContainer {
        width: 600/@base;
        margin: 20/@base auto;
      }
      .qianwanggoumai {
        height: 60/@base;
        line-height: 60/@base;
        // width: 670/@base;
        background-color: #ff9e20;
        text-align: center;
        font-size: 28/@base;
      }
      .weixin2 {
        width: 100%;
        margin: 50/@base 0;
        img {
          width: 100%;
        }
      }
      .fabiaopinglun {
        .title {
          font-size: 30/@base;
          margin-bottom: 10/@base;
        }
        .textArea {
          textarea {
            font-size: 24/@base;
            height: 150/@base;
            margin-bottom: 0;
          }
          div {
            background-color: #fbfbfb;
            button {
              float: right;
              background-color: #ff9e20;
              padding: 6/@base 12/@base;
              font-size: 26/@base;
            }
          }
        }
      }
    }
  }
</style>
